<template>
	
	<div id="js_map">
		
	</div>
  
  
</template>
<script>
import { defineComponent ,onMounted} from "vue";
import initMap from './loadmap.js'

import Graphic from "@arcgis/core/Graphic"

const pointGraphic = new Graphic({
    popupTemplate: {
      title: '标题',
      content: '<div>内空</div>'
    },
  geometry: {
    type: "point",
    longitude:119.01636198437475,
    latitude:27.29940604732408
  },
  symbol: {
    type: "simple-marker",
    style: "square",
    color: "blue",
    size: "18px",
    outline: {
      color: [ 255, 255, 0 ],
      width: 30
    }
  }
})


const textGraphic = new Graphic({
  geometry: {
    type: "point",
    longitude:119.01636198437475,
    latitude:27.29940604732408
  },
  symbol: {
	backgroundColor:'blue',
    type: 'text',
    text: 'Hello World',
    color: '#fff',
    angle: 0,
    font: {
      size: 8
    }
  }
})







export default defineComponent({
  setup() {
	  
	onMounted(()=>{
		let mapinfo=initMap({
			extent:{
				xmin: 113.57166666666666,
				ymin: 24.487222222222222,
				xmax: 118.48222222222222,
				ymax: 30.078611111111112,
				spatialReference: {
					wkid: 4326
				}
			},
			basemap: 'dark-gray',
			container: 'js_map',
			center: [119.01636198437475,27.29940604732408], // 指定中心点 
			zoom: 3
		})
		mapinfo.mapView.set({center: [mapinfo.mapView.center.longitude, mapinfo.mapView.center.latitude]})
		
		mapinfo.mapView.openPopup({
		  // ...
		})
		
		
// 或
		mapinfo.mapView.graphics.addMany([textGraphic])

	}) 
	  
	  
	  
	  
	  
    return {

    };
  }
});
</script>



<style scoped>
	#js_map{
		height:100%;
	}
</style>

